<template>
  <view class="new-card-wrapper">
    <!-- 顶部四个横向菜单 -->
    <view class="menu-row">
      <view @click="handlenav(item.url,item)" class="menu-item"
       v-for="(item, idx) in menuList" :key="idx">
        <u-image :src="item.icon" width="56rpx" height="56rpx" />
        <text class="menu-title">{{ item.title }}</text>
      </view>
    </view>
    <!-- 下方功能卡片区 -->
    <view class="card-grid">
      <view @click="handlenav(item.url, null, item.type)" class="card-item" :class="item.bgClass" v-for="(item, idx) in cardList" :key="idx">
        <view class="card-title relative z-2">{{ item.title }}</view>
        <view class="card-desc relative z-2">{{ item.desc }}</view>
        <view class="card-btn" :class="item.btnClass">{{ item.btnText }}</view>
        <view class="card-icon">
          <image :src="item.icon" mode="widthFix"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapActions,mapState } from 'vuex'
export default {
  props:{
    loginStatus:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
      menuList: [
        { title: '房屋认证',
         icon: '/static/menu-1.svg',
        url:'/pages/bindhouse/index?statue=jumpto' ,
        isHouse:false 
        },
        { title: '我要反馈', icon: '/static/menu-2.svg',
        url:"/pages/feedback/index" ,isHouse:true},
        { title: '小区公告', icon: '/static/menu-3.svg'
        ,url:"/pages/newslist/index",isHouse:false },
        { title: '入驻试用', icon: '/static/menu-4.svg' ,url:"/pages/selectsystem/index",isHouse:false}
      ],
      cardList: [
        {
          title: '业主大会',
          desc: '行使我的权利',
          btnText: '去投票',
          btnClass: 'card-btn1',
          bgClass: 'card-bg1',
          icon: '/static/card-1.svg',
          url: '/pages/votinglist/index',
          type: 1
        },
        {
          title: '快速决议',
          desc: '收集业主意见',
          btnText: '去决议',
          btnClass: 'card-btn2',
          bgClass: 'card-bg2',
          icon: '/static/card-2.svg',
          url: '/pages/votinglist/index',
          type: 2
        },
        {
          title: '问卷调查',
          desc: '表达我的看法',
          btnText: '去填写',
          btnClass: 'card-btn3',
          bgClass: 'card-bg3',
          icon: '/static/card-3.svg',
          url: '/pages/votinglist/index',
          type: 3
        },
        {
          title: '倡议书',
          desc: '共同参与活动',
          btnText: '去查看',
          btnClass: 'card-btn4',
          bgClass: 'card-bg4',
          icon: '/static/card-4.svg',
          url: '/pages/votinglist/index',
          type: 4
        }
      ]
    }
  },
  computed:{
    ...mapState("community",["communityId"])
  },
  methods:{
    ...mapActions("community",["checkLoginAndBoundHouses","checkLoginNotHouse"]),
    async handlenav(url,row,type){
       if(row&&(!row.isHouse)){
     
        if(url.includes("bindhouse")){
      
            let res=await  this.checkLoginNotHouse()
            console.log("res",res)
            if(!res) return
             uni.navigateTo({
              url:url,
            })
            
        }else{
       uni.navigateTo({
          url:url,
        })
        }
       
       }else{
       let res=await this.checkLoginAndBoundHouses()
       if(!res) return
         uni.navigateTo({
          url:url+`?type=${type?type:0}`,
         
        })
       }
      
      
        
      
      
    }
  }
}
</script>

<style lang="scss" scoped>
.new-card-wrapper {
  width: 100%;
 background: #FFFFFF;
    box-shadow: 0rpx 34rpx 142rpx 0rpx rgba(58,76,130,0.08), 0rpx 5rpx 14rpx 0rpx rgba(202,229,245,0.1);
    border-radius: 12rpx;
    padding: 32rpx;
    padding-bottom: 0;
    margin-top: 20rpx;
}
.menu-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 24rpx 0;
}
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.menu-title {
  font-size: 26rpx;
  color: #333;
  margin-top: 8rpx;
}
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24rpx 18rpx;
  padding: 0 0 24rpx 0;
}
.card-item {
  position: relative;
  min-height: 170rpx;
  border-radius: 16rpx;
  padding: 27rpx  29rpx;
  box-sizing: border-box;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
 width: 297.33rpx;
 height: 185rpx;
}
.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
}
.card-desc {
  font-size: 24rpx;
  color: #888;
  margin: 8rpx 0 18rpx 0;
}
.card-btn {
  width: 100rpx;
   height: 40rpx;
  font-size: 20rpx;
  border-radius: 24rpx;
 
  box-sizing: border-box;
  height: 48rpx;
  
  border: none;
  margin-bottom: 0;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-btn1 {
 background: #FFFAF5;
  color: #ff9900;
  border: 1rpx solid #EAA260;
}
.card-btn2 {
  color: #327FC7;
  background: #FDFEFF;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  border: 1rpx solid #327FC7;
}
.card-btn3 {
  background: #F7FEFF;
  border: 1rpx solid #09B4C3;
  color: #09B4C3;
}
.card-btn4 {
 background: #F9F4FF;
 border: 1rpx solid #A96BF6;
 color: #A96BF6;
}
/* .card-bg1 {
  background: #fffaf3;
}
.card-bg2 {
  background: #f7fafd;
}
.card-bg3 {
  background: #f3fcfd;
}
.card-bg4 {
  background: #faf7ff;
} */
.card-icon {
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
 z-index: 0;
    image{
      width: 100%;
      height: 100%;
    }
   
}
</style>
